// 路由相关的代码
import Vue from 'vue';
import VueRouter from 'vue-router';
import NProgress from 'nprogress'; //进度条
import 'nprogress/nprogress.css'; //进度条样式

//  因为下面用了路由懒加载，所以这写注释, 各个路由组件的引入
// import indexFilms from './views/indexFilms.vue'; //首页的所有一级or二级路由
// import home from './views/home.vue';
// import cinema from './views/cinema.vue';
// import center from './views/center.vue';
// import group from './views/group.vue';
// import NowPlaying from './components/NowPlaying'; //热映
// import SoonPlaying from './components/SoonPlaying'; //预映
// import datailsFilm from './views/datailsFilm.vue'; //详情页
// 挂载路由这插件
Vue.use(VueRouter);

const router = new VueRouter({
  routes: [{ //这里有两个一级路由，first下有四个子路由和 home下两个二级路由
      path: '/', // 会去找一个一级的坑，在App.vue
      component: () => import('./views/indexFilms.vue'),
      children: [{
          //  如果路径是空的localhost:8080
          path: '',
          redirect: '/home/NowPlay'
        },
        {
          // 首页
          path: 'home', // 路径为home会自动走到下面的子路由，所以在home下的子路由变了，home也会高亮
          // name: 'home', // 有子路由就不要给父路由设置name,name方便路由的跳转
          // 这个就是一个异步组件，当你进入到这个Home的组件的时候，才会去下载内容，而同步组件是在你页面启动的时候就已经加载了
          component: () => import('./views/home.vue'), // 路由懒加载异步组件
          children: [{
              path: '',
              redirect: '/home/NowPlay'
            },
            {
              // 正在上映   // 二级组件
              path: 'NowPlay',
              name: 'NowPlay',
              component: () => import('./components/NowPlaying/index.vue') //使用上面的组件
            },
            {
              //即将上映
              path: 'SoonPlay',
              name: 'SoonPlay',
              component: () => import('./components/SoonPlaying/index.vue')
            },
            {
              // 小购物车
              path: 'shoppingBox',
              name: 'shoppingBox',
              component: () => import('./components/FilmShopping/shoppingBox.vue')
            }
          ]
        },
        {
          // 影院页
          path: 'cinema',
          name: 'cinema',
          component: () => import('./views/cinema.vue')
        },
        {
          // 个人中心
          path: 'center',
          name: 'center',
          component: () => import('./views/center.vue')
        },
        {
          // 拼团
          path: 'group',
          name: 'group',
          component: () => import('./views/group.vue')
        }
      ]
    }, //=========上面的是首页的所有组件=====底部的影院，我的，电影页面不会跑到详情页去
    {
      //详情页//绑定id过去
      path: '/home/:filmId',
      // name也可以跳转
      name: 'datailsFilm',
      component: () => import('./views/datailsFilm.vue')
    },

    {
      //挖了一个坑，要登录、或者注册的进来
      path: '/user',
      component: {
        template: `
        <div>
          <router-view></router-view>
        </div>
        `
      },
      children: [{
          // 卖座卡的页面
          path: 'crad',
          component: () => import('./views/crad.vue'),
          beforeEnter(to, from, next) {
            // 判断用户没有登录,就直接打拦截打回到登陆页面
            if (localStorage.getItem('userName')) {
              next(); //有登录，直接到下一步进行登录
            } else {
              // 注意，如果需要实现，拦截到登陆页面之后，登录成功回跳到你之前想登陆的页面。
              // 就在本地存储本地的页面地址，这是一种方法
              // localStorage.setItem('myNeedPage', '/user/card');
              // next('/user/login');
              // vue这种方法更简单
              console.log(to.fullPath)
              next({
                path: '/user/login',
                query: {
                  // 带这个页面的完整路径过vue下面的query,fullPath 是vue路由的名称
                  redirect: to.fullPath
                }
              })
            }
          }
        },
        {
          path: 'login',
          // 写了里面的注释，在Network就不会是1.js 了，是login.js
          component: () => import( /* webpackChunkName: "login" */ './views/login.vue')
        },
        {
          // 注册页面
          path: 'enroll',
          component: () => import('./views/enroll.vue')
        },
        {
          // 城市定位
          path: 'citySite',
          component: () => import('./views/citySite.vue')
        }

      ]
    },

    {
      path: '*',
      redirect: '/home/NowPlay'
    }
  ]
});

/**执行进度条
 * 全局前置守卫，全局的页面去到哪里都会执行你要的东西
 * to:去哪里
 * from：从哪里来
 * next：结束当前的钩子函数，进去下一个相应钩子函数，如果没有的话，最终来控制是否可以切换路由
 */
router.beforeEach((to, from, next) => {
  NProgress.start(); //进度条从现在开始

  // 判断当前要去的路由是不是卖座卡或者余额或者设置  这样在全局里面是没有问题，只是要做判断
  // if (to.name === 'card' || to.name === 'yue' || to.name === 'set') {
  //   // 如果当前用户有登录，就可以去
  //   next();
  //   // 如果没有，就让去登陆页面
  //   next('/user/login')
  // }

  // 一定要做next
  next();
});

/**
 * 全局后置守卫
 * to:要去哪里
 * from：从哪里来
 */
router.afterEach((to, from) => {
  // 做一些额外处理，比如进度条的效果
  NProgress.done(); //进度条结束
})

// 暴露出去
export default router;
